<template>
	<div class="theContent">
		<contentTitle title="产量变化增长情况">
			<btnList v-show="!onlyOneCategory" :data="buttonList" :cur.sync="selectedCategoryId" @onClick="onCategoryChanged"></btnList></contentTitle>
		<contentBox class="theEchart"><Echart id="nearlySale" :options="option" /></contentBox>
	</div>
</template>

<script>
import contentBox from '@/components/contentBox.vue';
import contentTitle from '@/components/contentTitle.vue';
import btnList from '@/components/btnList.vue';

export default {
	components: {
		contentBox,
		contentTitle,
		btnList
	},
	data() {
		return {			
			selectedCategoryId: 1, //1-香榧 2-笋竹 3-山黄精			
			buttonList: [{ value: 1, label: '香榧' }, { value: 2, label: '笋竹' }, { value: 3, label: '山黄精' }],
			listSale:[],
			option: {}
		};
	},
	props:{
		onlyOneCategory:{
			type:Boolean,
			default:false,
		}
	},
	computed: {
		curCategoryId(){
			return this.$store.getters.curCategoryId; //
		},
		listSelectedCategory() {
			let categoryId = this.onlyOneCategory ? this.curCategoryId : this.selectedCategoryId
			return this.listSale.filter(item => item.categoryId == categoryId);
		},
		xAxisDataList() {
			return this.listSelectedCategory.map(item => item.year);
		},
		seriesDataList() {
			return this.listSelectedCategory.map(item => item.count);
		}
	},	
	
	methods: {
		initListData(listSale){			
			this.listSale = listSale
			this.onCategoryChanged()
		},
		initOption() {			
			// console.log("saleNearly: initOption",this.listSale)
			this.option = {
				xAxis: {
					type: 'category',
					boundaryGap: true,
					splitNumber: 1,
					interval: 4,
					data: this.xAxisDataList,
					axisLine: {
						show: true,
						lineStyle: {
							width: 5,
							color: '#BABABA'
						}
					},
					axisTick: {
						show: true,
						alignWithLabel: true,
						length: 10,
						lineStyle: {
							width: 2
						}
					},
					axisLabel: {
						margin: 20,
						fontSize: 24,
						color: '#FFFFFF'
					}
				},
				yAxis: {
					type: 'value',
					name: '吨',
					nameGap: 30,
					nameTextStyle: {
						color: '#FFFFFF',
						fontSize: 24,
						align: 'right'
					},
					axisLabel: {
						margin: 10,
						fontSize: 24,
						color: '#FFFFFF'
					},
					boundaryGap: ['10%', '10%'], // 坐标轴两边留白策略 [左右，上下]
					splitNumber: 3,
					splitLine: {
						show: true,
						lineStyle: {
							type: 'dashed',
							color: '#BABABA',
							width: 3
						}
					}
				},

				series: [
					{
						name: '销售增长',
						type: 'line',
						symbol: 'circle',
						symbolSize: 20,
						itemStyle: {
							// 设置symbol的颜色							
							color: '#00CE7D'
						},
						data: this.seriesDataList,
						lineStyle: {
							width: 5,
							color: '#00CE7D'
						},
						areaStyle: {
							color: '#00CE7D',
							opacity: 0.3
						}
					}
				]
			};
		},
		onCategoryChanged() {
			//通过参数绑定传值  :cur.sync="categoryId"
			this.$nextTick(() => {
				this.initOption();
			});
		}
	}
};
</script>
<style lang="scss" scoped>
.theContent {
	width: 100%;
	height: 100%;
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	gap: 20px;

	.theEchart {
		flex: 1;
	}
}
</style>
